<template>
  <div class="rating" v-if="rating">
    <template v-if="full === 0">
      <span class="rating0">暂无评分</span>
    </template>
    <template v-else>
      <template v-for="n in full">
        <span class="star-full"></span>
      </template><template v-for="n in half">
        <span class="star-half"></span>
      </template><template v-for="n in gray">
        <span class="star-gray"></span>
      </template>
    </template>
    <span class="average">{{parseFloat(rating.average).toFixed(1)}}</span>
  </div>
</template>

<script>
export default {
  name: 'rating',
  props: {
    rating: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      full: 0,
      half: 0,
      gray: 0
    }
  },
  created () {
    let average =this.rating.average
    this.full = parseInt(average / 2)
    this.half = average % 2 === 0 ? 0 : 1
    this.gray = 5 - this.full - this.half
  }
}
</script>

<style lang="scss" scoped>
.rating {
  margin-top: 4px;
  color: #aaa;
}

/*.star-full {*/
  /*display: inline-block;*/
  /*width: 10px;*/
  /*height: 10px;*/
  /*background-image: url();*/
  /*background-size: cover;*/
/*}*/

/*.star-gray {*/
  /*display: inline-block;*/
  /*width: 10px;*/
  /*height: 10px;*/
  /*background-image: url();*/
  /*background-size: cover;*/
/*}*/

/*.star-half {*/
  /*display: inline-block;*/
  /*width: 10px;*/
  /*height: 10px;*/
  /*background-image: url();*/
  /*background-size: cover;*/
/*}*/

/*.average {*/
  /*font-size: 12px;*/
/*}*/
</style>
